<template>
    <div class="subcontent">
        <h3 class="h3">评论</h3>
        <textarea placeholder="发表评论字数限制在100字" maxlength="100" class="text" v-model="advestise"></textarea>
        <mt-button type="primary" size="large" @click="addtext">发表评论</mt-button>
        <ul class="mt-sub">
            <li>
                <div class="mt_sub_top">
                    第一楼 &nbsp; &nbsp;  匿名用户&nbsp;  &nbsp;  发表时间 &nbsp; 2017-09-20  &nbsp;11:29:11
                </div>
                <div class="mt_sub_bottom">sha</div>
            </li>
        </ul>
         <mt-button type="primary" size="large" class="mtb" @click="add">加载更多</mt-button>

         <!-- 假如成功的获取数据 -->
        <!-- <ul class="mt-sub">
            <li v-for="(item, i) in comment" :key="item.add_time">
                <div class="mt_sub_top">
                    第{{i+1}} 楼 &nbsp; &nbsp;  {{item.user_name}}&nbsp;  &nbsp; 评论时间 &nbsp; {{item.add_name | dataFormate}} 
                </div>
                <div class="mt_sub_bottom">{{item.content}}</div>
            </li>
        </ul>
         <mt-button type="primary" size="large" class="mtb">加载更多</mt-button> -->
    </div>
</template>
<script>
import {Toast} from 'Mint-ui'
export default {
    data() {
        return {
            pageindex: 1,
            comment: [],
            advestise: ''
        }
    },
    created() {
        this.getshow()
    }
    ,
    methods: {
        getshow() {
            this.$http.get('api/getcomments/'+ this.id + '?pageindex=1').then(function(res){
                console.log(res);
                if (res.body.status == 0) {
                    this.comment = this.comment.cancat(res.body.message) // 数组的拼接  方式一
                    //  this.comment = this.comment.PUSH(...res.body.message)  // 数组的拼接  方式二  es6语法

                }else {
                    Toast('获取失败')
                }
            },function() {
                Toast({
                      message: '评论获取失败',
                     position: 'top',
                    duration: 3000
                })
            })
        },
        add() {
            this.pageindex++ 
            this.getshow()
            
        },
        addtext() {
            if (this.advestise.trim().length == 0) {
                Toast('请输入发表的内容')
            }
            this.$http.post('api/postcomment/' + this.id,{
                content:this.advestise
            }).then(function(res) {
                if (res.body.status == 0){
                    var comment_one = {
                        user_name: res.body.user_name,
                        add_name: res.body.item.add_name,
                        content: res.body.content
                    }
                    this.comment.unshift(comment_one)
                    this.advestise = ''
                }else {
                    Toast('评论添加失败')
                }
            }).then(function() {
                Toast('评论添加失败')
            })
        }
    },
    props: ['id']
}
</script>
<style lang="scss" scoped>
    .subcontent {
        .h3 {
            font-size: 18px;
        }
        .text {
            margin: 0;
        }
        .mt-sub {
            padding: 0;
            margin: 0;
            margin-top: 5px;
            li {
                list-style: none;
            }
            .mt_sub_top {
                height: 40px;
                line-height: 40px;
                background-color: #ccc;
            }
            .mt_sub_bottom {
                height: 50px;
                line-height: 50px;
                padding-left: 20px;
                font-size: 17px;
            }
        }
        .mtb {
            background-color: #fff;
            border: 1px solid red;
            color: red;
        }
    }
</style>